<template>
    <HeaderSearchVue></HeaderSearchVue>
    <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item, index in bannerList" :key="index" @click="onBanner(item.bannerId, item.url)">
                <van-image :src="item.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <!-- 发现音乐首页图标导航 -->
    <div class="menu-gird">
        <van-grid :gutter="10" square :border="false">
            <van-grid-item to="/home/recommend" icon="notes-o" :icon-color="color.red" text="每日推荐" />
            <van-grid-item icon="service-o" :icon-color="color.red" text="私人FM" />
            <van-grid-item to="/home/songsteet/0" icon="orders-o" :icon-color="color.red" text="歌单" />
            <van-grid-item to="/home/allmv" icon="like" :icon-color="color.red" text="MV" />
        </van-grid>
    </div>
    <div class="content-card">
        <!-- 推荐歌单 -->
        <div>
            <p class="small-title">推荐歌单
                <van-button icon="arrow" icon-position="right" text="更多" size="mini" round to="/home/songsteet/0" />
            </p>
            <van-swipe class="songs-swipe" :width="100" :loop="false" :show-indicators="false">
                <van-swipe-item v-for="item in recommendSongsSteet" :key="item.id" @click="onSongs(item.id)">
                    <van-image width="80" height="80" :radius="10" :src="item.picUrl">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <template v-slot:error>加载失败</template>
                    </van-image>
                    {{ item.name }}
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 网友精选歌单 -->
        <div>
            <p class="small-title">歌单(网友精选碟)
                <van-button icon="arrow" icon-position="right" text="更多" size="mini" round to='/home/songsteet/1' />
            </p>
            <van-swipe class="songs-swipe" :width="100" :loop="false" :show-indicators="false">
                <van-swipe-item v-for="item in selectedSongsSteet" :key="item.id" @click="onSelected(item.id)">
                    <van-image width="80" height="80" :radius="10" :src="item.coverImgUrl">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <template v-slot:error>加载失败</template>
                    </van-image>
                    {{ item.name }}
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 新歌速递 -->
        <div>
            <p class="small-title"><span><van-icon name="replay"/>根本停不下来 | 新歌速递</span>
                <van-button icon="arrow" icon-position="right" text="更多" size="mini" round to='/' />
            </p>
            <van-swipe class="hotsong-swipe" :loop="false" :show-indicators="false">
                <van-swipe-item>
                    <van-list>
                        <van-cell v-for="item in newSongsLeft" :key="item.id" @click="onNewSongsLeft(item.id, item.album.picUrl)">
                            <van-image width="30" height="30" :radius="5" :src="item.album.picUrl" />
                            {{ item.name }} - {{ item.artists[0].name }}
                        </van-cell>
                    </van-list>
                </van-swipe-item>
                <van-swipe-item>
                    <van-list>
                        <van-cell v-for="item in newSongsCenter" :key="item.id" @click="onNewSongsCenter(item.id, item.album.picUrl)">
                            <van-image width="30" height="30" :radius="5" :src="item.album.picUrl" />
                            {{ item.name }} - {{ item.artists[0].name }}
                        </van-cell>
                    </van-list>
                </van-swipe-item>
                <van-swipe-item>
                    <van-list>
                        <van-cell v-for="item in newSongsRight" :key="item.id" @click="onNewSongsRight(item.id, item.album.picUrl)">
                            <van-image width="30" height="30" :radius="5" :src="item.album.picUrl" />
                            {{ item.name }} - {{ item.artists[0].name }}
                        </van-cell>
                    </van-list>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 雷达歌单 -->
        <div>
            <p class="small-title">某某某的雷达歌单
                <van-button icon="arrow" icon-position="right" text="更多" size="mini" round to='/home/songsteet/2' />
            </p>
            <van-swipe class="songs-swipe" :width="100" :loop="false" :show-indicators="false">
                <van-swipe-item v-for="item in radarSongsSteet" :key="item.creativeId" @click="onRadar(item.creativeId)">
                    <van-image width="80" height="80" :radius="10" :src="item.uiElement.image.imageUrl">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <template v-slot:error>加载失败</template>
                    </van-image>
                    {{ item.uiElement.mainTitle.title }}
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="no-more"><button>没有更多了</button></div>
    </div>


</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
// import { useRoute } from 'vue-router';
import axios from 'axios'
import router from '@/router';
import { RequestNewSongs, RequestSelected, RequestRecommend, RequestRadarSongsSteet, RequestBanner } from '@/api/homeFind';
import HeaderSearchVue from '@/components/HeaderSearch.vue';
const color = reactive({
    red: '#EC4141',
})
const loading = ref(false)
const finished = ref(false)

// const active = ref(0);

// 推荐歌单
let recommendSongsSteet = ref([])
const getRecommend = async (limit = 8) => {
    let recommendData = await RequestRecommend(limit)
    // console.log(recommendData)
    const { code, result } = recommendData.data
    if (code == 200) {
        recommendSongsSteet.value = result
        // console.log(recommendSongsSteet)
    }
}
getRecommend(8)
const onSongs = (id: number) => {
    console.log('songsID', id)
    router.push({ path: '/mymusic/musiclist/' + id })
}

// 歌单(网友精选碟)
let selectedSongsSteet = ref([])
const getSelected = async (order = 'hot', limit = 8) => {
    let selectedData = await RequestSelected( order, limit )
    // console.log(selectedData)
    const { code, playlists } = selectedData.data
    if (code == 200) {
        selectedSongsSteet.value = playlists
        // console.log(selectedSongsSteet)
    }
}
getSelected('hot', 8)
const onSelected = (id: number) => {
    console.log('selectedId', id)
    router.push({ path: '/mymusic/musiclist/' + id })
}

// 新歌速递
let newSongsLeft = ref([])
let newSongsCenter = ref([])
let newSongsRight = ref([])
// let arr = ref([])
const getNewSongs = async (type = 0) => {
    let newSongsData = await RequestNewSongs( type )
    // console.log(newSongsData)
    const { code, data } = newSongsData.data
    let left = Math.random() * (data.length - 9)
    let center = left + 1
    let right = center + 1
    if (code == 200) {
        newSongsLeft.value = data.splice(left, 3)
        newSongsCenter.value = data.splice(center, 3)
        newSongsRight.value = data.splice(right, 3)
        // console.log(newSongs)
        // arr.value.push(...newSongsLeft.value,...newSongsCenter.value,...newSongsRight.value)
        // arr.value=JSON.stringify(arr.value)
        // console.log(arr.value)
    }
}
getNewSongs(7)
const onNewSongsLeft = (id: number) => {
    router.push({
        name: "musicdetail", query: { id: id}
        // path: "/musicdetail/:id/:url", query: { id: id, url: url }
        // name: "musicdetail", params: { id: id, url: arr }
    })
}
const onNewSongsCenter = (id: number) => {
    router.push({
        name: "musicdetail", query: { id: id }
        // path: "/musicdetail/:id/:url", query: { id: id, url: url }
        // name: "musicdetail", params: { id: id, url: arr }
    })
}
const onNewSongsRight = (id: number) => {
    router.push({
        name: "musicdetail", query: { id: id }
        // path: "/musicdetail/:id/:url", query: { id: id, url: url }
        // name: "musicdetail", params: { id: id, url: arr }
    })
}

// 某某某的雷达歌单、banner列表
let radarSongsSteet = ref([])   //雷达歌单

const getRadar = async () => {
    let radarData = await RequestRadarSongsSteet()
    const { code, data } = radarData.data
    // console.log('data.data',data)
    if (code == 200) {
        radarSongsSteet.value = data.blocks[8].creatives    //雷达
        // bannerList.value = data.blocks[0].extInfo.banners   //  banner图    
        // console.log(radarSongsSteet)
        // console.log(bannerList)
    }
}
getRadar()
// 雷达歌单
const onRadar = (id: number) => {
    console.log('radarId', id)    
    router.push({ path: '/mymusic/musiclist/' + id })
}

// banner列表
let bannerList = ref([])        //banner列表
const getBannerList = async (type = 2) => {
    let bannerData = await RequestBanner( type )
    const { code, banners } = bannerData.data
    if(code == 200){
        bannerList.value = banners
    }
}
getBannerList(2)
// Banner
const onBanner = (id: number, url: string) => {
    console.log('bannerID', id)
    console.log('相应跳转链接', url)
    if(url != null){
        location.href = url
    }
}

</script>

<style scoped lang="scss">
.banner {
    box-sizing: border-box;
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;

    .my-swipe .van-swipe-item {
        height: 150px;
        text-align: center;

        .van-image {
            width: 100%;
            height: 150px;
        }
    }
}

.content-card {
    box-sizing: border-box;
    height: 180px;

    .small-title {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
    }

    .van-grid {
        .van-grid-item {
            font-size: 10px;
        }
    }

    .songs-swipe {
        font-size: 10px;
        height: 120px;
        text-align: center;

        .van-swipe-item {
            box-sizing: border-box;
            padding: 0 10px;
        }
    }

    .hotsong-swipe {
        font-size: 10px;
        text-align: left;

    }
}
.no-more{
    padding-bottom: 2rem;
    margin: 20px;
    text-align: center;
    button{
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        padding: 0 10px;
        background: #F1F3F4;
        border: none;
        outline: none;
        border-radius: 15px;
    }
}
</style>